<template>
	<view class="user" :style="{backgroundImage:'url('+bgImg+')'}" ref="user">
		  <scroll-view  scroll-y="true" class="scroll-Y" >
				<!-- 顶部展示用户头像粉丝 -->
		                   <view class="navTop">
		                   	<view class="tx">
									<u-avatar :src="myInfo.profile.avatarUrl" class="img" size="150"></u-avatar>
									
									<view class="userName">
										{{myInfo.profile.nickname}}
									</view>
									
							</view>
							<view class="fs">
									<view class="table">
										<view class="tableItem">
											<view class="nums">
												{{account.profile.followeds}}
											</view>
											<view class="">
												粉丝
											</view>
												
										</view>
										<view class="tableItem">
											<view class="nums">
												{{account.profile.follows}}
											</view>
											<view class="">
												关注
											</view>
										</view>
										<view class="tableItem">
											<view class="nums">
												{{account.level}}
											</view>
											<view class="">
												等级
											</view>
										</view>
									</view>
									<view class="btn">
										编辑资料
									</view>
							</view>
		                   </view>
				<!-- 用户歌单收藏等数据		   -->
				
						   
						   
		 </scroll-view>
		
	</view>
</template>

<script>
	export default{
		onLoad(){
			this.user= this.$store.state.user
		
			this.getMyInfo()
			this.getAccount()
		},
		data(){
			return{
				user:{},
				myInfo:{}, //个人信息 用户名头像等
				bgImg:'',
				account:{},//用户数据 粉丝 等级等数据
			}
		},
		methods:{
			//获取个人信息
			getMyInfo(){
				
				this.$request({
					url:'/user/account',				
				}).then(res=>{
				
					this.myInfo=res.data
					console.log(res)
					this.bgImg=this.myInfo.profile.backgroundUrl
				})
			},
			//获取用户数据 例如粉丝 收藏
			getAccount(){
				this.$request({
					url:'/user/detail',	
					data:{
						uid:this.user.account.id
					}
				}).then(res=>{
					
					this.account=res.data
					console.log(this.account)
					
				})
			}
			
		}
		
	}
</script>

<style  lang="scss" scoped>
	.user{
		width: 100%;
		height: calc(100vh - 190rpx);
		
		background-repeat: no-repeat;
		background-position: 50% 0%;
	}
	.scroll-Y{
		width: 100%;
			height: calc(100vh - 190rpx);
		border: 1px solid red;
	}
	.navTop{
		width: 100%;
		height: 250rpx;

		display: flex;
		.tx{
			width:30%;
			height: 100%;
			
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;		
			.userName{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bolder;
			}
		}
		.fs{
			width: 70%;

			.table{
				width: 100%;
				height: 72%;
	
				display: flex;
				justify-content: space-between;
				.tableItem{
					width: 33.3%;
					height: 100%;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: white;
					.nums{
						font-size: 40rpx;
					}
					
				}
			}
			.btn{
				width: 100%;
				height: 28%;
				border-radius: 40rpx ;
				border: 1px solid  #565A5F;
				line-height: 67rpx;
				text-align: center;
			}
		}
	
	}
</style>
